<template>
  <a-modal
    :destroy-on-close="true"
    :mask-closable="false"
    :visible="visible"
    :title="title"
    :confirm-loading="loading"
    :width="700"
    @cancel="handleClose"
    @ok="handleSubmit"
  >
    <a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-item label="文章标题" name="title">
        <a-input v-model:value="formData.title" placeholder="请输入文章标题" />
      </a-form-item>
      <a-form-item label="文章分类" name="categoryId">
        <a-select v-model:value="formData.categoryId" placeholder="请选择文章分类">
          <a-select-option v-for="(name, key) in categoryItems" :key="key" :value="parseInt(key)">{{
            name
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="封面图" name="imageId">
        <select-image v-model:value="formData.imageId" :default-list="image ? [image] : []" />
      </a-form-item>
      <a-form-item label="文章内容" name="content">
        <editor v-model:value="formData.content" />
      </a-form-item>
      <a-form-item label="虚拟阅读量" name="virtualViews" extra="用户看到的阅读量 = 实际阅读量 + 虚拟阅读量">
        <a-input-number v-model:value="formData.virtualViews" />
      </a-form-item>
      <a-form-item label="状态" name="status" extra="用户端是否展示">
        <a-radio-group v-model:value="formData.status" button-style="solid">
          <a-radio-button v-for="item in ShowStatusEnum.$options()" :key="item.value" :value="item.value">{{
            item.label
          }}</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="排序" name="sort" extra="数字越小越靠前">
        <a-input-number v-model:value="formData.sort" :min="0" :max="99" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script name="ArticleEdit" lang="ts" setup>
import { getArticle, saveArticle, updateArticle } from "@/api/content/article";
import { enum2Value, toImage } from "@/utils/conver";
import { ShowStatusEnum } from "@/enums/common";

const emit = defineEmits(["reload"]);

const title = ref("添加文章");
const loading = ref(false);
const visible = ref(false);

const categoryItems = inject("categoryItems");

const formRef = ref();
const formData: any = reactive({
  articleId: undefined
});

const formRules = reactive({
  title: [{ required: true, trigger: "blur", message: "请输入文章标题" }],
  categoryId: [
    {
      required: true,
      type: "number",
      trigger: "blur",
      message: "请选择文章分类"
    }
  ],
  imageId: [
    {
      required: true,
      min: 1,
      type: "number",
      trigger: "blur",
      message: "请选择封面图"
    }
  ],
  content: [
    {
      required: true,
      type: "string",
      trigger: "blur",
      message: "请输入文章内容"
    }
  ]
});
const image = ref();

const handleGetArticle = (id: number) => {
  loading.value = true;
  getArticle(id)
    .then(response => {
      Object.assign(formData, enum2Value(response.data));
      image.value = toImage(formData.imageId, formData.imageUrl);
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleAdd = () => {
  Object.assign(
    formData,
    reactive({
      articleId: undefined,
      title: "",
      imageId: 0,
      content: "",
      virtualViews: 0,
      status: ShowStatusEnum.SHOW.code,
      sort: 99
    })
  );
  title.value = "添加文章";
  visible.value = true;
};

const handleEdit = (id: number) => {
  handleGetArticle(id);
  title.value = "编辑文章";
  visible.value = true;
};

const handleClose = () => {
  formRef.value.resetFields();
  visible.value = false;
};

const handleSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      loading.value = true;
      if (formData.articleId === undefined) {
        saveArticle(formData)
          .then(() => {
            antdMessage.success("添加成功");
            emit("reload");
            handleClose();
          })
          .finally(() => {
            loading.value = false;
          });
      } else {
        updateArticle(formData)
          .then(() => {
            antdMessage.success("编辑成功");
            emit("reload");
            handleClose();
          })
          .finally(() => {
            loading.value = false;
          });
      }
    })
    .catch(error => {
      console.log("error", error);
    });
};

defineExpose({ handleAdd, handleEdit });
</script>
